<template>
	<view class="wxn-grid-item-wrap" :style="{'width':width,'height':height}"@click="click" >
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "wxn-grid-item",
		data() {
			return {
				width: 0,
				height:0

			};
		},
		props:{
			param:{
				type:[Object,String,Number],
				default:""
			}
		},

		created() {
			
			this.getParentData('wxn-grid');
			this.parent.children.push(this)

		},
		methods: {
			getParentData(parentName = '') {
				// 避免在created中去定义parent变量
				if (!this.parent) this.parent = false;
				// 这里的本质原理是，通过获取父组件实例(也即u-radio-group的this)
				// 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
				// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
				// console.log('-------------@' + this.$parent.$options.name)
				this.parent = this.parentF(this, parentName);
				// console.log('xxx:' + this.parent['col'])
				this.width = 100 / Number(this.parent['col']) + '%'
				this.height=this.width
				// console.log('@',this.height)
				// console.log('#',this.parent)
				// if (this.parent) {
				// 	console.log('@','hhhhhhhhh')
				// 	// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
				// 	Object.keys(this.parentData).map(key => {
				// 		console.log('-------------@',key)
				// 		this.parentData[key] = this.parent[key];
				// 	});
				// }
			},
			parentF(name = undefined) {
				let parent = this.$parent
				// 通过while历遍，这里主要是为了H5需要多层解析的问题
				while (parent.$options.name != 'wxn-grid') {
					// 父组件
					if (parent.$options && parent.$options.name !== name) {
						// 如果组件的name不相等，继续上一级寻找
						parent = parent.$parent;
						// console.log('-------------@', parent.$options.name)

					}
				}
				return parent;
			},
			click(){
				// console.log('点击')
				this.$emit('click',this.param)
				this.parent.tap(this.param)
			}
		}
	}
</script>

<style scoped lang="scss">
	.wxn-grid-item-wrap {

		// box-sizing: border-box;
		/* #ifdef MP */
		position: relative;
		float: left;
		/* #endif */

		/* #ifndef MP */
		display: flex;
		align-items: center;
		justify-content: center;
		/* #endif */
	}
</style>
